<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/angular.min.js"></script>
    <style>
        *{
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select:none;
            -khtml-user-select:none;
            -webkit-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        @font-face {font-family: 'iconfont';
            src: url('font/iconfont.eot'); /* IE9*/
            src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('font/iconfont.woff') format('woff'), /* chrome、firefox */
            url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        .iconfont{font-family:"iconfont" !important;
            font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.05rem;
        }
        .table{
            cursor: default;
        }

        .table{
            cursor: default;
        }




        .comment-id{
            display:none;
        }


        .active{
            background: #e8e8e8;
        }



        .delete{
            font-size: 2rem;
            cursor: pointer;
        }

        .delete:hover{
            color: #aaa;
        }
    </style>
</head>
<body ng-app="page-content" ng-controller="page-ctrl">
<script>
    var pageContent=angular.module("page-content",[]);
    pageContent.controller('page-ctrl',function($scope,$http){
        function init(){
            $http({
                method:"GET",
                url:"/comment/user"
            }).then(function(data){
                console.log(data);
                var userComments=data.data.usercomment;
                $scope.userComments=userComments;
            });
        }

        var deleteComment=function(commentId){
            $http({
                url:'/comment/delete?commentId='+commentId
            }).then(function(data){
                var _commentId=data.data.usercomment.commentId;
                var _userComments=$scope.userComments;
                for(var i=0;i<_userComments.length;i++){
                    if(_userComments[i].commentId==_commentId){
                        $scope.userComments.splice(i,1);
                    }
                }
                $scope.$applyAsync();
            });
        }

        $(document).ready(function(){
            init();
        });

        $(document).on('click','.delete',function(){
            var commentId=$(this).parent().parent().find('.comment-id').text();
            $(this).attr('disabled','disabled');
            deleteComment(commentId);
        });
    });


</script>
<div class="container" style="width: 100%">
    <table class="table">
        <thead>
        <tr>
            <th></th>
            <th>音乐标题</th>
            <th>评论时间</th>
            <th>评论内容</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="userComment in userComments">
            <td class="comment-id">{{userComment.commentId}}</td>
            <td >{{$index<9?"0":""}}<span class="index">{{$index+1}}</span></td>
            <td class="song-name-inf" data-toggle="tooltip" title="{{userComment.songName}}">{{userComment.songName}}</td>
            <td>{{userComment.commentTime}}</td>
            <td class="commentInf" data-toggle="tooltip" title="{{userComment.commentContent}}">{{userComment.commentInf}}</td>
            <td><span class="iconfont delete">&#xe609;</span></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
